<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_媒体查询_媒体特性</title>
  <style>
    *{
      margin: 0;
      padding: 0 ;
    }
    h1{
      height: 200px;
      background-color: grey;
      font-size: 100px;
      /* 文字水平居中 */
      text-align: center;
      /* 文字垂直居中 */
      line-height: 200px;

    }

    /* 当视口尺寸为800px时 */
    @media (width:800px) {
      h1{
        background-color: green;
      }
    }

    /* 当视口尺寸小于700px时 */
    @media (max-width:700px){
      h1{
        background-color: orange;
      }
    }

    /* 当视口尺寸大于等于900px时，应用如下样式 */
    @media (min-width:900px){
      h1{
        background-color: deepskyblue;
      }
    }
    /* 视口高度为800px */
    @media (height:800px){
      h1{
        background-color: yellow;
      }
    }

    /* 检测到屏幕的宽度等于1920时，应用如下样式 */
    @media (device-width:1280px){
      h1{
        background-color: green;
      }
    }

  </style>
</head>
<body>
  <h1>你好啊</h1>
  
</body>
</html>